import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import HeroService from '@services/hero.service';
import { WindowService } from '@services/window.service';


@Component({
  selector: 'app-add-hero',
  templateUrl: './add-hero.component.html',
  styles: [`
	  .add-hero form {
      max-width: 900px;
      margin: 20px auto;
	  }
	  add-hero form {
	    text-align: center;
	    margin-top: 16px;
      margin-right: 10px;
	  }
    .btn {
      margin-right: 10px;
    }
    .submit {
      text-align: center;
    }`
  ],
  providers: [HeroService],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AddHeroComponent implements OnInit {
  formValues: FormGroup;
  private submitFlag = false;
  constructor(
    private fb: FormBuilder,
    private router: Router,
    private heroServe: HeroService,
    private windowServe: WindowService
  ) {
    this.formValues = this.fb.group({
      name: ['', [Validators.required, Validators.maxLength(20)]],
      age: ['', [Validators.required, Validators.min(0)]],
      gender: ['0', [Validators.min(0)]],
      phone: ['', [Validators.required, Validators.pattern(/^1\d{10}$/)]],
      email: ['', [Validators.required, Validators.email]],
      job: ['', [Validators.required]],
      role: ['', [Validators.required]],
      brief: ['', [Validators.required, Validators.minLength(8), Validators.maxLength(100)]]
    });
  }

  ngOnInit() {
  }

  get formControls() {
    const controls = {
      name: this.formValues.get('name'),
      age: this.formValues.get('age'),
      gender: this.formValues.get('gender'),
      phone: this.formValues.get('phone'),
      email: this.formValues.get('email'),
      job: this.formValues.get('job'),
      role: this.formValues.get('role'),
      brief: this.formValues.get('brief')
    };
    return {
      name: {
        control: controls.name,
        showErr: controls.name.touched && controls.name.invalid,
        errors: controls.name.errors
      },
      age: {
        control: controls.age,
        showErr: controls.age.touched && controls.age.invalid,
        errors: controls.age.errors
      },
      gender: {
        control: controls.gender,
        showErr: controls.gender.touched && controls.gender.invalid,
        errors: controls.gender.errors
      },
      phone: {
        control: controls.phone,
        showErr: controls.phone.touched && controls.phone.invalid,
        errors: controls.phone.errors
      },
      email: {
        control: controls.email,
        showErr: controls.email.touched && controls.email.invalid,
        errors: controls.email.errors
      },
      job: {
        control: controls.job,
        showErr: controls.job.touched && controls.job.invalid,
        errors: controls.job.errors
      },
      role: {
        control: controls.role,
        showErr: controls.role.touched && controls.role.invalid,
        errors: controls.role.errors
      },
      brief: {
        control: controls.brief,
        showErr: controls.brief.touched && controls.brief.invalid,
        errors: controls.brief.errors
      }
    };
  }
  cancel(): void {
    this.router.navigateByUrl('./heroes').then();
  }
  onSubmit() {
    this.submitFlag = true;
    // console.log('this.formValues:', this.formValues);
    if (this.formValues.valid) {
      this.heroServe.addHero(this.formValues.value).subscribe(() => {
        this.cancel();
        this.windowServe.alert('新增成功');
      });
    }
  }
  canDeactivate(): boolean {
    if (this.formValues.dirty && !this.submitFlag) {
      return window.confirm('表单未保存，确定要离开吗？');
    }
    return true;
  }
}
